<template>
	<view class="serverItemIndex">
		<image mode="aspectFill" class="imgStyle" src="../../static/image/test/excavator.jpg"></image>
		<view class="content">
			<view class="serverName">大型挖掘机维修</view>
			<view class="serverDec">大型挖掘机维修描述大型挖掘机维修描述大型挖掘机维修描述大型挖掘机维修描述大型挖掘机维修描述大型挖掘机维修描述大型挖掘机维修描述</view>
			<view class="PriceAndButton">
				<view class="serverPrice">2200.00元</view>
				<button type="primary" class="immediateRepair">立即报修</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "serverItemIndex",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.serverItemIndex {
		display: flex;
		padding: 35rpx;
		border: 2rpx solid #bbbbbb;
		margin: 5rpx;
		border-radius: 20rpx;

		.imgStyle {
			width: 100vh;
			height: 20vh;
		}

		.content {
			display: flex;
			flex-direction: column;

			.serverName {
				margin: 5rpx 0 5rpx 5rpx;
				font-weight: 800;
				font-size: 45rpx;
			}

			.serverDec {
				// font-weight: 600;
				margin: 5rpx 0 5rpx 5rpx;
				/* 设置为弹性盒子布局 */
				display: -webkit-box;
				/* 垂直布局 */
				-webkit-box-orient: vertical;
				/* 设置最大显示的行数 */
				-webkit-line-clamp: 2;
				/* 隐藏超出的部分 */
				overflow: hidden;
			}

			.PriceAndButton {
				margin: 5rpx 0 5rpx 5rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 5rpx;

				.serverPrice {
					// font-weight: 600;
				}
			}
		}
	}
</style>
